<template>
  <div>
    <baidu-map :center="{lng: 116.403765, lat: 39.914850}" :zoom="11">
      <bm-view class="map"></bm-view>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-control :offset="{width: '10px', height: '10px'}">
        <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
          <search-field placeholder="请输入地名关键字">
            <input type="text" v-model="keyword"></input>
          </search-field> <!-- 这里指代一个自定义搜索框组件 -->
        </bm-auto-complete>
      </bm-control>
      <bm-local-search :keyword="keyword" :auto-viewport="true" ></bm-local-search>
    </baidu-map>
    <!--图片上传-->
    <el-upload
      class="avatar-uploader"
      action="http://localhost/dev-api/file/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <el-button @click="kkview">预览</el-button>
  </div>

</template>

<script>
export default {
  data () {
    return {
      yl:'',
      keyword: '',
      imageUrl: '',
      fire:''
    }
  },
  methods: {
    kkview(){
      // let Base64 = require('js-base64').Base64
      // window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(this.fire)));
      window.open(this.yl)
    },
    handleAvatarSuccess(res, file) {
      this.fire=file.response.url
      this.yl=file.response.data.url
      console.log(file.response.data.url)
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
  name: "index",

}
</script>

<style>
.map {
  width: 100%;
  height: 850px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
